<template>
	<view class="body">
		<u-grid :col="2">
			<u-grid-item v-for="item in videoList" :key="item.id" :custom-style="{padding: '2rpx',height:'600rpx'}" @click="openUrl('/plugins/short_video/video?video_id='+item.id)">
				<view style="width: 49vw;height: 49vw;">
					<u-lazy-load style="width: 49vw;height: 49vw;" :image="item.cover_pic" img-mode="aspectFill"></u-lazy-load>
				</view>
				<view style="padding: 5px;width: 100%;">
					<view style="height: 80rpx;font-size: 10pt;font-weight: 600;" v-line-clamp="2">{{item.title}}</view>
					<view style="font-size: 9pt;display: flex;justify-content: space-between;">
						<view>
							<text v-if="item.user_id>1">{{item.nickname}}</text>
							<text v-else="item.user_id">@兰亭臻选</text>
						</view>
					</view>
					<view style="font-size: 9pt;text-align: right;">{{formatTimeToStr(item.created_at)}}</view>
				</view>
			</u-grid-item>
			
		</u-grid>
		
		<!--加载loadding-->
		<u-loadmore style="padding: 20rpx 0;" :status="loadingStatus" :load-text="loadText" @loadmore="clickLoadMoreHandler"/>
		
	</view>
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	export default{
		data(){
			return {
				config:{
					enable:0,
					condition:2,
				},
				videoList:[],
				pagination:{
					current_page:1,
					page_count:0,
					total_count:0
				},
				loadingStatus:'loadmore',
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '已经到底了'
				},
			}
		},
		async onLoad() {
			console.log(123,window.location)
			//更新分享内容
			this.$wechatSdk.initShareUrl({
				app_share_title: "精选作品"
			}, window.location.protocol + '//' + window.location.host + window.location.pathname + '#/plugins/short_video/index');
			
			
			let res = await this.$http.request({
				url: this.$api.short_video.getConfig,
				method: 'get',
			});
			if(res.code !== 0){
				return this.$http.toast(res.msg);
			}
			Object.assign(this.config,res.data);
			if( this.config.enable === 0 ){
				return uni.showModal({
					title:"温馨提示",
					content:"短视频应用已关闭，请稍后再尝试~",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({url:'/pages/index/index'});
						}
					}
				})
			}
			

			this.getVideoList()
		},
		methods:{
			//获取视频列表
			async getVideoList(){
				let res = await this.$http.request({
					url: this.$api.short_video.getVideoList,
					method: 'get',
					data:{page:this.pagination.current_page}
				});
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				this.videoList.push(...res.data.list);
				this.pagination = res.data.pagination;
			},
			//触底或手动点击加载更多的处理方法
			clickLoadMoreHandler(){
				if( this.loadingStatus == 'loadmore' && this.pagination.current_page < this.pagination.page_count){
					this.loadingStatus = 'loading';
					setTimeout(() => {
						this.pagination.current_page++;
						this.getVideoList();
					},1000)
				}else{
					this.loadingStatus = 'nomore'
				}
			},
			openUrl(url){
				uni.navigateTo({url})
			},
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm')
			}
		},
		
		
		//监听页面下拉刷新
		async onPullDownRefresh(){
			this.videoList = [];
			this.pagination = {
				current_page:1,
				page_count:0,
				total_count:0
			};
			await this.getVideoList();
			uni.stopPullDownRefresh();
		},
		/* 触底加载更多 */
		onReachBottom() {
			this.clickLoadMoreHandler();
		},
	}
</script>

<style lang="scss">
	
</style>